<template>
    <div>
        <!-- 自定义标签使用 -->
        <!-- 
            通过自定义标签的自定义属性控制 ，
            父组件传给子组件值
        -->
        <!-- <Small 
            :type="'text'"
            place-holder="请输入你的账号"
            :value="number" 
            @change="changeNumber"
            /> -->
            <!-- @change="父组件里面的methods的事件 不带括号" -->
            <!-- <br> -->
            <!-- <button @click="number = 789">
                在Box.vue里面修改number值
            </button> -->
            <!-- <button @click="verify()">
                在Box.vue检测number的值
            </button> -->
        <!-- <Small 
            placeholder="请输入你的密码" 
            value="12456"/>
        <Small 
            :type="'date'"
            placeholder="请选择你的生日" /> -->
            <input-value 
                :type="type"  
                @toggle="toggleType"/>

                <br>
                <h1>评分</h1>
            <Star 
            number="8" 
            :s_index="star"
            @changeIndex="changeStar"/>
            <Star 
            number="99" 
            :s_index="55"
            @changeIndex="changeStar"/>

            <h1>
                步骤条
            </h1>
            <Step 
                :arr="stepArr"
                :s_index="stepIndex"
                @changeIndex="changeStep"/>
    </div>
</template>

<script>
    // 引入输入框组件
    import inputValue from '@/components/homework/password.vue'
    // 引入评分组件
    import Star from '@/components/homework/start.vue'
    // 引入步骤条的组件
    import Step from '@/components/homework/step.vue'
    export default {
        // 注册组件
        components: {
            inputValue,
            Star,
            Step
        },
        data(){
            return {
                type:'password',
                // 分数
                star: 5,
                // 步骤条的数据
                stepArr: [
                    {
                        id: 0,
                        text: '待付款'
                    },{
                        id: 1,
                        text: '已付款'
                    },{
                        id: 2,
                        text: '待发货'
                    },{
                        id: 3,
                        text: '待收货'
                    },{
                        id: 4,
                        text: '待评价'
                    },{
                        id: 5,
                        text: '交易完成'
                    }
                ],
                // 当前进行到 第几步
                stepIndex: -1
            }
        },
        methods: {
            toggleType(e){
                // console.log(e);
                // 直接改变 type
                this.type = e;
            },
            changeStar(e){
                // console.log(e);
                this.star = e + 1;
            },
            changeStep(e){
                if(e > this.stepArr.length-1){
                    this.stepIndex = -1;
                    return
                }
                this.stepIndex = e;
                // console.log(e);
            }
        }
    }
    // // 引入
    // // import Small from '../src/components/box/Small.vue'
    // import Small from '@/components/box/Small.vue'
    // // 导出
    // export default {
    //     // 注册组件
    //     components: {
    //         Small
    //     },
    //     data() {
    //         return {
    //             number: 456
    //         }
    //     },
    //     methods: {
    //         changeNumber(e){
    //             console.log('接收到small.vue的事件通知',e);
    //             // 改变number的值
    //             this.number = e;
    //         },
    //         verify(){
    //             console.log(this.number);
    //         }
    //     }
    // }
</script>